<template>
  <div class="map">
    <el-input
      v-model="addressKeyword"
      placeholder="请输入地址来直接查找相关位置"
      clearable
      style="margin-bottom:20px"
    >
      <el-button slot="append" icon="el-icon-search" @click="getAddressKeyword"></el-button>
    </el-input>
    <div id="container" style="width:100%; height:500px"></div>
  </div>
</template>
<script>
import { initMap } from "@/libs/map";

export default {
  name: "MapSelect",
  data() {
    return {
      map: null,
      getAddress: null,
      getAddCode: null,
      addressKeyword: "",
    };
  },
  props: {
    keyword: {
      type: String,
      default: "",
    },
  },
  mounted() {
    this.addressKeyword = this.keyword;
    let that = this;
    initMap().then((qq) => {
      var myLatlng = new qq.maps.LatLng(26.562063972085, 106.70211235061);
      var myOptions = {
        zoom: 16,
        center: myLatlng,
        mapTypeId: qq.maps.MapTypeId.ROADMAP,
      };
      that.map = new qq.maps.Map(
        document.getElementById("container"),
        myOptions
      );
      var label = new qq.maps.Label({
        map: that.map,
        offset: new qq.maps.Size(15, -12),
        draggable: false,
        clickable: false,
      });
      that.map.setOptions({
        draggableCursor: "crosshair",
      });
      qq.maps.event.addListener(that.map, "mousemove", function (e) {
        var latlng = e.latLng;
        label.setPosition(latlng);
        label.setContent(
          latlng.getLat().toFixed(6) + "," + latlng.getLng().toFixed(6)
        );
      });
      //获取点击后的地址
      qq.maps.event.addListener(that.map, "click", function (event) {
        // 获取点击后的地图坐标
        var lng = event.latLng.getLng();
        var lat = event.latLng.getLat();
        var json = { lng: lng, lat: lat };
        that.$emit("setLocation", json);
        // that.getAddressCode();
      });

      //调用地址显示地图位置并设置地址
      that.getAddress = new qq.maps.Geocoder({
        complete: function (result) {
          that.map.setCenter(result.detail.location);
          //   console.log(result.detail.location);
          //   that.shopInfo.lng = result.detail.location.lng;
          //   that.shopInfo.lat = result.detail.location.lat;
          //   var marker = new qq.maps.Marker({
          //     map: that.map,
          //     position: result.detail.location,
          //   });
        },
      });
      //通过坐标来显示地图地址
      that.getAddCode = new qq.maps.Geocoder({
        complete: function (result) {
          that.addressKeyword = result.detail.address;
        },
      });
       this.getAddress.getLocation(this.addressKeyword);
    });
  },
  methods: {
    getAddressKeyword() {
      //通过getLocation();方法获取位置信息值
      this.getAddress.getLocation(this.addressKeyword);
      //   调用自带的接口;
    },
    // 通过坐标获得地址
    getAddressCode() {
      var lat = parseFloat(this.shopInfo.lat);
      var lng = parseFloat(this.shopInfo.lng);
      var latLng = new window.qq.maps.LatLng(lat, lng);
      //调用获取位置方法
      this.getAddCode.getAddress(latLng);
    },
  },
  watch: {
    keyword: function (newValue) {
      if (newValue) {
        this.addressKeyword = newValue;
      }
    },
  },
};
</script>
